<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>捐赠</title>
    <style>
      form {
        margin: auto;
        background-color: rgb(239, 238, 238);
        border: 1px solid;
        width: 90%;
        height: 50px;
      }

      form input {
        height: 20px;
        width: 100px;
      }

      select {
        height: 24px;
        width: 100px;
      }

      .num {
        margin: auto;
        background-color: rgb(42, 92, 136);
        width: 90%;
        height: 30px;
        text-align: right;
        line-height: 30px;
        color: rgb(255, 255, 255);
        border: 1px solid;
      }
      .fromAdd {
        display: flex;
        /* justify-content: space-between; */
      }

      table {
        border-collapse: collapse;
        width: 90%;
        margin: auto;
        background-color: rgb(191, 222, 239);
      }

      table th {
        width: 12.5%;
        text-align: center;
        border: 2px solid;
        background-color: rgb(118, 181, 222);
      }

      table tbody td {
        width: 12.5%;
        text-align: center;
        border: 1px solid;
      }

      a {
        width: 60px;
        height: 20px;
        text-decoration: none;
        /* background-color: rgb(237, 107, 42); */
        color: rgb(0, 0, 0);
      }
      a:hover {
        color: rgb(55, 100, 117);
      }

      button {
        height: 25px;
        width: 70px;
        background-color: rgb(52, 167, 220);
        color: aliceblue;
        border: none;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <form class="info" action="">
      <div>
        <span>受捐单位：</span>
        <select name="danwei" class="danweiCha">
          <option value="厚朴公司">厚朴公司</option>
          <option value="翻斗花园">翻斗花园</option>
        </select>
        <button id="cha">查询</button>
        <button id="huifu">恢复</button>
      </div>
      <div class="fromAdd">
        <div>
          <span>捐赠人:</span>
          <input type="text" class="uname" name="uname" placeholder="姓名" />
        </div>
        <div>
          <span>受捐单位:</span>
          <select name="danwei" class="danwei">
            <option value="厚朴公司">厚朴公司</option>
            <option value="翻斗花园">翻斗花园</option>
          </select>
        </div>
        <div>
          <span>金额:</span>
          <input type="number" class="money" name="money" placeholder="金额" />
        </div>
        <div>
          <span>受捐日期:</span>
          <input type="date" class="date" name="date" />
        </div>

        <button id="add">新增</button>
      </div>
    </form>
    <div class="num">共有数据<span>0</span>条</div>
    <table>
      <thead>
        <th>序号</th>
        <th>捐赠人</th>
        <th>受捐单位</th>
        <th>金额</th>
        <th>受捐日期</th>

        <th>操作</th>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      const tableText = JSON.parse(localStorage.getItem("data")) || [];

      // 获取表单
      const info = document.querySelector(".info");
      const uname = document.querySelector(".uname");
      const danwei = document.querySelector(".danwei");
      const money = document.querySelector(".money");
      const date = document.querySelector(".date");
      var add = document.querySelector("#add");
      var tbody = document.querySelector("tbody");

      // 更新表格数据函数
      function dataUpdate() {
        var trText = tableText.map(function (item, index) {
          return `
     <tr class='row'>
      <td>${item.id}</td>
      <td>${item.name}</td>
      <td class='danweiTd'>${item.danwei}</td>
      <td>${item.money}</td>
      <td>${item.time}</td>

      <td>
        <a href="#" class='change' data-id="${index}">修改</a>
        <a href="#" class='del' data-id="${index}">删除</a>
      </td>
       </tr>`;
        });

        tbody.innerHTML = trText.join("");
        document.querySelector(".num>span").innerHTML = tableText.length;
      }
      dataUpdate();

      add.addEventListener("click", function (e) {
        e.preventDefault();
        if (!uname.value.trim() || !money.value.trim() || !date.value.trim()) {
          return alert("输入不能为空");
        }
        tableText.push({
          id: tableText.length ? tableText[tableText.length - 1].id + 1 : 1,
          name: uname.value,
          danwei: danwei.value,
          money: money.value,
          time: date.value,
        });

        dataUpdate();
        localStorage.setItem("data", JSON.stringify(tableText));
      });

      // 删除
      tbody.addEventListener("click", function (e) {
        if (e.target.classList.contains("del")) {
          if (confirm("是否删除?")) {
            var index = e.target.dataset.id;
            tableText.splice(index, 1);
            dataUpdate();
            localStorage.setItem("data", JSON.stringify(tableText));
          }
        }
      });

      // 修改
      tbody.addEventListener("click", function (e) {
        if (e.target.classList.contains("change")) {
          var index = e.target.dataset.id;
          var man = prompt("请输入修改的捐赠人");
          var danwei = prompt("请输入修改的公司");
          var count = prompt("请输入修改金额");
          var day = prompt("请输入修改的日期");

          if (man && danwei && count && day) {
            tableText[index] = {
              id: tableText[index].id,
              name: man,
              danwei: danwei,
              money: count,
              time: day,
            };
            dataUpdate();
            localStorage.setItem("data", JSON.stringify(tableText));
          }
        }
      });

      // 查询
      var cha = document.querySelector("#cha");
      var danweiCha = document.querySelector(".danweiCha");
      cha.addEventListener("click", function (e) {
        e.preventDefault();
        var danweiTd = document.querySelectorAll(".danweiTd");
        for (var i = 0; i < danweiTd.length; i++) {
          if (danweiTd[i].innerHTML != danweiCha.value) {
            danweiTd[i].parentNode.remove();
          }
        }
      });

      // 恢复原数据
      var huifu = document.querySelector("#huifu");
      huifu.addEventListener("click", function (e) {
        e.preventDefault();
        dataUpdate();
      });
    </script>
  </body>
</html>
